<template>
  <div class="list">
    <div class="list-item"
         v-for="(item,index) in resource"
         :key="index"
         @click="onClickItem(item)">
      <img :src="item.pic"
           alt="">
      <div class="list-item-data">
        <div class="title">{{item.title}}</div>
        <div class="username">{{item.username}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    resource: {
      type: Array,
      required: true
    }
  },
  methods: {
    onClickItem (ablum) {
      this.$emit('onClickItem', ablum)
    }
  }
}
</script>
<style scoped lang = "scss">
.list {
  width: 100%;
  &-item {
    height: 60px;
    display: flex;
    padding: 10px 20px;
    align-items: center;
    width: 100%;
    img {
      height: 60px;
      margin-right: 20px;
    }
    .username {
      margin-top: 10px;
    }
  }
}
</style>
